<template>
	<div class="container">
		<search-Bar></search-Bar>
		<el-row class="tr">
			<el-col :span="12" :offset="12" class="tr">
				<el-button @click="handleShare"> <i class="iconfont">&#xe67b;</i>检查分享</el-button>
				<el-button> <i class="iconfont">&#xe689;</i>影像对比</el-button>
			</el-col>
		</el-row>
		<div id="box" :style="{height: scrollerHeight}">
			<div id="left">
				<div>
					<my-table :table-data="tableData" :col-configs="colConfigs" :list-loading="listLoading" :total="total"
						:page-size="listQuery.pagesize" @refreshList="getList" @handleMulSelection="handleMulSelection"
						@sortChange="sortChange">
						<el-table-column slot="opt" label="操作" width="120px">
							<template slot-scope="{ row }">
								<span class="iconfont bg-edit" @click="handleDetail(row)">&#xe66c;</span>
								<span class="iconfont bg-stop" @click="dialogFormVisibleUpdate = true">&#xe66d;</span>
							</template>
						</el-table-column>
						<el-table-column slot="patient_class" label="就诊类型" width="120px">
							<template slot-scope="{ row }">
								<span v-if="row.patient_class === 0">门诊</span>
								<span v-if="row.patient_class === 1">住院</span>
								<span v-if="row.patient_class === 2">急诊</span>
								<span v-if="row.patient_class === 3">体检</span>
								<span v-if="row.patient_class === 4">普通</span>
							</template>
						</el-table-column>
						<el-table-column slot="patient_sex" label="患者性别" width="120px">
							<template slot-scope="{ row }">
								<span v-if="row.pateint_sex === 0">男</span>
								<span v-if="row.pateint_sex === 1">女</span>
								<span v-if="row.pateint_sex === 2">未知</span>
							</template>
						</el-table-column>
					</my-table>
				</div>
				<svg width="100%" id="controllerSvg"></svg>
			</div>
			<div id="resize"></div>
			<div id="right">
				<!--      <svg width="100%" height="auto" id="serverSvg" ></svg>-->
				<detail></detail>
			</div>
			<p></p>
		</div>
		<!-- 分享列表-->
		<el-dialog title="分享内容" :visible.sync="dialogVisible" width="50%">
			<my-table :table-data="shareList" :col-configs="colConfigs2">
				<el-table-column slot="opt" label="操作" width="120px">
					<template slot-scope="scope">
						<span class="iconfont bg-delete" @click="handleDelete(scope)">&#xe67d;</span>
					</template>
				</el-table-column>
			</my-table>
			<el-row class="share_obj">
				<el-col :span="2" class="shre_obj"><span>* 分享对象</span></el-col>
				<el-col :span="22">
					<el-input type="input" autosize placeholder="请输入分享对象" v-model="shareDataObj.share_user"></el-input>
				</el-col>

			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分享二维码-->
		<el-dialog title="分享二维码" :visible.sync="dialogVisibleQrode" width="50%" center>
			<div class="tc share">
				<div id="query">
					<h1>分享给:{{shareDataObj.share_user}}</h1>
					<div id="qrcode" ref="qrcode"></div>
				</div>
				<div class="link">链接; <span id="qrcodeUrl">{{shareLink}}</span></div>
				<el-row>
					<el-button class="btn_bg" @click="handleCopy">复制到剪切板</el-button>
				</el-row>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import selfcoloumn from './selfcoloumn.vue'
import detail from './detail.vue'
import searchBar from '@/components/searchBar'
import robot from './robot.vue'
import myTable from 'components/myTable'
import { checkPhone } from '@/utils/validate'
import { getList } from '@/api/archive-record'
import QRCode from 'qrcodejs2'
export default {
	name: 'change',
	components: {
		myTable,
		searchBar,
		selfcoloumn,
		robot,
		detail,
		QRCode,
	},
	data () {
		return {
			colConfigs: [
				// todo 字段缺失
				{ type: 'selection' },
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'patient_name',
					label: '患者姓名',
				},
				{
					prop: 'med_rec_no',
					label: '病历号',
				},
				{ slot: 'patient_class' },
				{
					prop: 'depart_name',
					label: '检查科室',
				},
				{
					prop: 'accession_number',
					label: '检查号',
				},
				{
					prop: 'exam_type',
					label: '检查类型',
				},
				{
					prop: 'exam_item',
					label: '检查项目',
				},
				{
					prop: 'id_card_no',
					label: '身份证号',
				},
				{
					prop: 'disk_space',
					label: '存储容量',
					sortable: true,
				},
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: true,
				},
				{
					prop: 'report_time',
					label: '报告时间',
					sortable: true,
				},
				{
					prop: 'archive_time',
					label: '归档时间',
					sortable: true,
				},
			],
			colConfigs2: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'patient_name',
					label: '患者姓名',
				},
				{
					prop: 'med_rec_no',
					label: '病历号',
				},
				{
					prop: 'accession_number',
					label: '检查号',
				},
				{
					prop: 'perform_time',
					label: '检查时间',
				},
			],
			tableData: [],
			total: null,
			listLoading: false,
			listQuery: {
				pagesize: 10,
				pageindex: 1,
			},
			shareList: [],
			dialogVisible: false,
			dialogVisibleQrode: false,
			shareDataObj: {
				data: [],
				share_user: '分享对象',
			}, // 分享对象obj
			shareLink: 'http://jeramy.org',
		}
	},
	methods: {
		dragControllerDiv () {
			const resize = document.getElementById( 'resize' )
			const left = document.getElementById( 'left' )
			const right = document.getElementById( 'right' )
			const box = document.getElementById( 'box' )

			resize.onmousedown = function ( e ) {
				const startX = e.clientX
				resize.left = resize.offsetLeft
				document.onmousemove = function ( e ) {
					const endX = e.clientX
					let moveLen = resize.left + ( endX - startX )
					const maxT = box.clientWidth - resize.offsetWidth
					if ( moveLen < 150 ) {
						moveLen = 360
					}
					if ( moveLen > maxT - 800 ) {
						moveLen = maxT - 800
					}
					resize.style.left = moveLen
					left.style.width = `${ moveLen }px`
					right.style.width = `${ box.clientWidth - moveLen - 5 }px`
				}
				document.onmouseup = function () {
					document.onmousemove = null
					document.onmouseup = null
					resize.releaseCapture && resize.releaseCapture()
				}
				resize.setCapture && resize.setCapture()
				return false
			}
		},
		getList ( val ) {
			// 获取列表统计
			const params = Object.assign( this.listQuery, val )
			getList( params ).then( res => {
				this.tableData = res.data
				this.total = res.total
				console.log( res )
			} )
		},
		sortChange ( val ) {
			//  排序
			console.log( val )
		},
		handleMulSelection ( val ) {
			// 多选
			console.log( val )
			this.shareList = val
		},
		handleShare () {
			// 检查分享
			if ( this.shareList.length === 0 ) {
				this.$message.warning( '请选择分享项' )
			} else {
				// 弹窗生成列表
				this.dialogVisible = true
			}
		},
		handleDelete ( { $index, row } ) {
			// 删除
			this.$confirm( '是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			} )
				.then( async () => {

          /*
           * 删除 todo
           * await deleteRole(row.key)
           */
					this.shareList.splice( $index, 1 )
					this.$message( {
						type: 'success',
						message: '已删除!',
					} )
				} )
				.catch( err => {
					console.error( err )
				} )
		},
		handleSubmit () {

      /*
       * 提交,二维码生成 handleSubmit
       * 必填项
       */
			if ( this.shareList.length > 0 ) {

        /*
         * 允许分享
         * 判断分享对象是存在
         */
				if ( this.shareDataObj.share_user ) {

          /*
           * 分享
           * TOdo 接口
           *  todo bug 生成多个二维码
           * 需要判断 是否更改过shareList
           * 生成二维码
           */
					this.dialogVisibleQrode = true
					this.$nextTick( function () {
						this.handleQrode()
					} )
				} else {
					this.$message.warning( '请填写分享对象' )
				}
			} else {
				this.$message.warning( '请重新选择分享项' )
			}
		},
		handleQrode () {
			const _this = this
			document.getElementById( 'qrcode' ).innerHTML = ''
			const qrcode = new QRCode( 'qrcode', {
				width: 200, // 设置宽度，单位像素
				height: 200, // 设置高度，单位像素
				text: _this.shareLink, // 设置二维码内容或跳转地址
			} )
		},
		handleCopy () {
			// 复制
			const range = document.createRange()
			const tar = document.querySelector( '#qrcodeUrl' )
			range.selectNodeContents( tar )
			const selection = window.getSelection()
			selection.removeAllRanges()
			selection.addRange( range )
			document.execCommand( 'copy' )
			selection.removeAllRanges()
			// 	this.$message.success( '复制成功' )
		},
	},
	computed: {
		scrollerHeight () {
			return `${ window.innerHeight - 285 }px`
		},
	},
	mounted () {
		this.dragControllerDiv()
		this.getList()
	},
}
</script>

<style scoped lang="less">
.container {
	padding-left: 20px;
}
#box {
	width: 100%;
	height: 600px;
	position: relative;
	overflow: scroll;
}
#left {
	width: calc(25% - 5px);
	height: 100%;
	float: left;
	overflow: auto;
}

#resize {
	position: relative;
	width: 5px;
	height: 100%;
	cursor: w-resize;
	float: left;
}

#right {
	width: 75%;
	height: 100%;
	float: left;
	overflow: scroll;
}
.el-button {
	color: #0a70b0;
	margin: 20px 10px 20px 0;
}
.share_obj {
	span {
		line-height: 40px;
		height: 40px;
	}
}
.share {
	margin: 0 auto;
	h1 {
		font-size: 14px;
		color: #000;
	}
	#qrcode {
		padding-left: 40%;
		margin: 20px 0;
	}
	img {
		margin: 0 auto;
	}
	.link {
		color: #0a70b0;
	}
}
</style>
